<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>L2 FITS 图像预览</title>
    <style>
        body { display: flex; font-family: Arial, sans-serif; }
        #sidebar { width: 200px; overflow-y: auto; }
        #preview-container { flex: 1; padding: 20px; text-align: center; }
        #image-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
        .thumb { width: 100px; height: 100px; cursor: pointer; }
        #popup { display: none; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); width: 1100px; background: white; padding: 10px; border: 1px solid black; z-index: 1000; }
        #popup img { max-width: 500px; max-height: 500px; }
        /* 弹出窗口标题栏 */
        #popupHeader {
            padding: 5px;
            background: #f1f1f1;
            border-bottom: 1px solid #ccc;
            cursor: move; /* 鼠标悬停时显示可拖动光标 */
        }
        #closePopup { cursor: pointer; color: red; }
        #popupImgR{border: 1px solid red;}
        #popupImgB{border: 1px solid blue;}
    </style>
</head>
<body>
    <div id="sidebar">
        <h3>目标列表</h3>
        <select id="targetSelect" size="30" onchange="loadFitsList()"></select>
    </div>
    <div id="preview-container">
        <h3 id="targetTitle">请选择目标</h3>
        <div id="image-grid"></div>
    </div>
    
    <div id="popup" style="display: none;">
        <div id="popupHeader">
            <span id="closePopup">× 关闭</span>
            图像详情 (拖动我)
        </div>
        <h4 id="popupTitle"></h4>
        <img id="popupImgR" class="popup-img" src="">
        <img id="popupImgB" class="popup-img" src="">
        <!-- <button onclick="document.getElementById('popup').style.display='none'">关闭</button> -->
    </div>
    
    <script>
        async function loadTargets() {
            let response = await fetch('/vt_parm_images/L2/object_list_l2.json');
            let targets = await response.json();
            let select = document.getElementById("targetSelect");
            select.innerHTML = targets.map(t => `<option value="${t.target_name}">${t.target_name}</option>`).join("");
        }

        async function loadFitsList() {
            let target = document.getElementById("targetSelect").value;
            document.getElementById("targetTitle").innerText = target;
            let response = await fetch(`/vt_parm_images/L2/object_fit_list/${target}.json`);
            let files = await response.json();
            let grid = document.getElementById("image-grid");
            grid.innerHTML = files.map(f => {
                let imgPath = `/vt_images/L2/preview/imacal_vt/${f.relative_path}/${f.file_name.replace(".fit", ".jpg")}`;
                return `<img class='thumb' src='${imgPath}' onclick='showPopup("${imgPath}")'>`;
            }).join("");

        }

        function showPopup(imgPath) {
            let originRPath = imgPath.replace(".jpg", "_origin.jpg"); // R 通道原图
            let originBPath = originRPath.replace("_R_","_B_"); // B 通道原图
            let filename = imgPath.split('/').pop(); // 提取文件名
            
            document.getElementById("popupTitle").innerText = filename;
            
            let imgB = document.getElementById("popupImgB");
            let imgR = document.getElementById("popupImgR");

            // 先尝试加载 B 图像，失败则回退到 imgPath
            imgB.src = originBPath;
            imgB.onerror = function () {
                imgB.src = imgPath;
            };

            // 先尝试加载 R 图像，失败则回退到 imgPath
            imgR.src = originRPath;
            imgR.onerror = function () {
                let imgPathR = imgPath.replace("_B_", "_R_"); // R 通道原图
                imgR.src = imgPath;
            };

            document.getElementById("popup").style.display = "block";
        }


        // 初始化弹出窗口拖动功能
        function setupPopupDrag() {
            const popup = document.getElementById("popup");
            const popupHeader = document.getElementById("popupHeader");
            const closePopup = document.getElementById("closePopup");

            let isDragging = false;
            let offsetX, offsetY;

            // 拖动功能
            popupHeader.addEventListener("mousedown", (e) => {
                if (e.target !== closePopup) { // 避免点击关闭按钮时触发拖动
                    isDragging = true;
                    offsetX = e.clientX - popup.offsetLeft;
                    offsetY = e.clientY - popup.offsetTop;
                }
            });

            document.addEventListener("mousemove", (e) => {
                if (isDragging) {
                    popup.style.left = `${e.clientX - offsetX}px`;
                    popup.style.top = `${e.clientY - offsetY}px`;
                }
            });

            document.addEventListener("mouseup", () => {
                isDragging = false;
            });

            // 关闭功能
            closePopup.addEventListener("click", () => {
                popup.style.display = "none"; // 隐藏弹窗
            });
        }

        // loadTargets();

        document.addEventListener("DOMContentLoaded", async () => {
            await loadTargets();
            setupPopupDrag(); // 初始化弹出窗口拖动功能
        });
    </script>
</body>
</html>
